
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1.按钮和DIV的单击事件（三种绑定方式）


2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
3.登入页面
用户名输入框，
密码输入框，
提交按钮

任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。

你需要安装Flash插件才能完整显示QQ秀的动态内容。 -->
<!-- 3 -->
<button id="1" onclick="aa()"></button>
<button id="2"></button>
<button id="3"></button>
<form action="">
    用户名：<input type="text" id="uname" onfocus="focus1()" onblur="blur1()">
    密码：<input type="text" id="pwd" onfocus="focus2" onblur="blur2">
    <button>提交</button>
 <!-- 分割-----------------------    -->
 <div id="div2" style="width: 200px;height: 200px;border: 1px solid blue;"></div>
 <button id="botton1" onclick="add()"></button>
 <button id="bottom2" onclick="remove()"></button>
</form>
</body>
<script>
    function aa(){
        console.log('鼠标单击')
    }
    document.getElementById(2).onclick=function(){
        alert('鼠标单击')
    } 
    function bb(){
        document.getElementById(3).addEventListener('click',aa)
    }
        
    }
        
    }
    function focus1(){
        console.log('用户再输入名称')
    }
    function blur1(){
        var uname=document.getElementById('uname');
        if(uanme.value==''){
            alert("没有输入用户名")
        
        }
        if(unmae.value.length<6){
            alert('用户名不能小于6为')
        
        }
    }
    function focus2(){
        console.log('用户在输入密码')
    }
    function blur2(){
        var pwd=document.getElementById('pwd')
        if(pwd==''){
            alert('用户没有输入文字')
        }
    }
    function btn1(){
        var unmae=document.getElementById('unam')
        var pwd=document.getElementById('pwd')
        if(uname==''){
            alert('用户名为空')
        }
        if(pwd==''){
            alert('密码为空')
        }
        if(uname==''&&pwd==''){
            alert('都为空')

        }
    }
    function aa(){
        console.log('鼠标正在移动')
    }
    function add(){
        document.getElementById('div2').addEventListener('mousemove',aa)
    }
    function remove(){
        document.getElementById('div2').removeEventListener('mousemove',aa)
    }


</script>
</html>